<template>
  <!--横屏直播-->
  <div class="landscape-live-box">
    <VideoCom
      ref="videoCom"
      :videoInfo="roomInfo.roomInfo"
      type="wScreen"
      status="living"
    />
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :loop="barrageLoop"
      :boxWidth="500"
      :boxHeight="145"
      :messageHeight="8"
      :throttleGap="1000"
    >
    </vue-baberrage>
    <div class="video-cover-box" v-if="videoCoverBox">
      <img
        class="cover-video-img"
        :src="
          roomInfo.roomInfo.preImagUrl +
            '?x-oss-process=image/resize,m_fixed,h_424,w_750'
        "
        v-show="
          roomInfo.roomInfo.preImagUrl && roomInfo.roomInfo.preImagUrl != ''
        "
      />
      <div class="play-btn" id="bofang" v-if="isPlayBtn" @click="playBtn"></div>
    </div>
    <!--大智慧标识-->
    <div class="dzh-bs" v-if="isDzhBs">
      <p>{{ roomId }}</p>
      <div class="dzh-jg-box">机构</div>
    </div>
    <transition
      name="marquee"
      @before-enter="marqueeBeforeEnter"
      @enter="marqueeEnter"
      @after-enter="marqueeAfterEnter"
      @before-leave="marqueeBeforeLeave"
      @leave="marqueeleLeave"
      @after-leave="marqueeAfterLeave"
      :css="false"
    >
      <div v-if="isMarquee" ref="marqueeDom" class="marquee-box" :style="note">
        <div class="marquee-left"></div>
        <div class="marquee-content">
          <div class="marquee-text-box">{{ marqueeArray[0] }}</div>
        </div>
      </div>
    </transition>
    <!--进入直播间提示-->
    <transition
      name="showRect"
      @before-enter="TipUnBeforeEnter"
      @enter="TipUnEnter"
      @after-enter="TipUnAfterEnter"
      @before-leave="TipUnBeforeLeave"
      @leave="TipUnLeave"
      @after-leave="TipUnAfterLeave"
      :css="false"
    >
      <div
        v-show="marqueeTipUnShow"
        class="marquee-tip"
        :class="[marqueeTipClass]"
      >
        <p>
          <span>{{ marqueeTipUnArray[0] }}</span
          >{{ comeTip }}
        </p>
      </div>
    </transition>
    <!--倒计时组件-->
    <LsCountDownCom
      :time="roomInfo.roomInfo.beginTime"
      v-if="isCountDown"
      @formChildMsg="formChildData"
	  themeColor='zgrs'
    />
    <!-- tab组件 -->
    <MiddleNavCom
      :navTabArray="navTabArray"
      v-if="isNoNav"
      @formChildMsg="formChildData"
	    themeColor='zgrs'
    />
    <!--内容区域动态组件-->
    <keep-alive>
      <component
        ref="refContent"
        :redPacketMsgData="redPacketMsgData"
        :roomInfo="roomInfo"
        :is="isContentCom"
        :socketLoveMsg='socketLoveMsg'
        :socketGiftMsg= 'socketGiftMsg'
        :imMsgItem="imMsgItem"
        :imOfficalMsgItem="imOfficalMsgItem"
        :imReplyMsgItem="imReplyMsgItem"
        :noNavLength="noNavLength"
        :speakerData="speakerData"
        @formChildMsg="formChildData"
      ></component>
    </keep-alive>
    <!--一键下单组件-->
    <ShoppingBtn
      v-if="isShoppingBtn"
      :shoppingTitle="shoppingTitle"
      :shoppingIcon="shoppingIcon"
      :productObj="productObj"
      :roomInfo="roomInfo"
    />
    <!--右边互动区域组件-->
    <!--<LsInteractionRightCom/>-->
    <!--右边互动按钮组件-->
    <InteractionRightCom
      :roomInfo="roomInfo"
      @formChildMsg="formChildData"
      ref="childRightWrap"
    />
    <!-- 红包组件 -->
    <RedPacketCom
      v-if="isRedPacketCom"
      :key="renderCom"
      :redPacketData="redPacketData"
      :redEnterType="enterType"
      :sid="roomInfo.roomInfo.sid"
      :list="redListParent"
      @formChildMsg="formChildData"
    />
    <!-- 送礼物操作面板 -->
    <div
      v-if="showSendMask"
      class="gift-bg-mask"
      @click="hideGiftPanelHandle"
    ></div>
    <transition
      appear
      name="sendGiftBox"
      @before-enter="sheetBeforeEnter"
      @enter="sheetEnter"
      @after-enter="sheetAfterEnter"
      @before-leave="sheetBeforeLeave"
      @leave="sheetLeave"
    >
      <SendGift
        v-if="showGiftPanelFlag"
        :roomInfo="roomInfo"
        @formChildMsg="formChildData"
      >
      </SendGift>
    </transition>
    <!--送礼物提示-->
    <transition
      name="sendGiftPanel"
      @before-enter="TipUnBeforeEnters"
      @enter="TipUnEnters"
      @after-enter="TipUnAfterEnters"
      @before-leave="TipUnBeforeLeaves"
      @leave="TipUnLeaves"
      @after-leave="TipUnAfterLeaves"
    >
      <GiftTips v-show="showSendGiftFlag"></GiftTips>
    </transition>
    <!--邀请卡组件-->
    <InvitationCard
      v-if="isInvitationCard"
      @msgParent="msgParent"
      :fromCom="fromCom"
      :liveInfo="roomInfo.roomInfo"
    />
    <!-- 打赏组件 -->
    <LiveReward
      v-if="roomInfo.marketQR != null"
      :rewardInfo="roomInfo.marketQR"
    />
    <!-- 商品讲解组件 -->
		<ProductExplain  @getProduct="getProduct" v-if="isProductShow" :productObj="productObj" />
  </div>
</template>

<script>
import config from "@/config";
import webim from "@/util/imSdk";
import baseIm from "@/util/imBase";
import fun from "@/util/function";
import socket from "@/util/Socket";
import wxApi from "@/util/wxApi";
import VideoCom from "@/components/videoCom.vue";
import LsCountDownCom from "@/pages/liveRoomPages/components/lsComponents/lsCountDownCom.vue"; //倒计时组件
import MiddleNavCom from "@/pages/liveRoomPages/components/lsComponents/middleNavCom.vue"; //
import LsFooter from "@/pages/liveRoomPages/components/lsComponents/lsFooter.vue"; //底部组件  lsInteractionRightCom
import LiveMsg from "@/pages/liveRoomPages/components/lsComponents/liveMsg.vue"; //留言组件
import ShoppingBtn from "@/pages/liveRoomPages/components/lsComponents/shoppingBtn.vue"; //一键下单组件
import LiveBack from "@/pages/liveRoomPages/components/lsComponents/liveBack.vue"; //直播间回看组件
import LiveCurProduct from "@/pages/liveRoomPages/components/lsComponents/liveCurProduct.vue"; //直播间图文组件
import LiveInvitationList from "@/pages/liveRoomPages/components/lsComponents/liveInvitationList.vue"; //直播间邀请榜组件
import ZxyhLiveInvitationList from "@/components/actionSheet/zxyhLiveInvitationList.vue"//中信银行邀请榜
import LiveLinks from "@/pages/liveRoomPages/components/lsComponents/liveLinks.vue"; //直播间热门产品组件
import InteractionRightCom from "@/pages/liveRoomPages/components/interactionRightCom.vue"; //右边互动按钮组件
import ProductExplain from '@/pages/liveRoomPages/components/liveProducts.vue'//商品讲解组件
import RedPacketCom from "@/pages/liveRoomPages/components/redPacketCom.vue"; //红包组件
import SendGift from "@/components/actionSheet/sendGift"; //送礼打赏
import GiftTips from "@/components/actionSheet/giftTips.vue"; //送礼提示
import InvitationCard from "@/pages/invitationCard/newInvitationCard.vue"; //邀请卡
import LiveReward from "@/pages/liveRoomPages/components/lsComponents/liveReward.vue"; //打赏组件
import LiveSpeaker from "./liveSpeaker"; //主讲
function trim(s) {
  //前后空格用空字符串替代
  return s.replace(/(^\s*)|(\s*$)/g, "");
}

export default {
  props: {
    roomInfo: Object
  },
  mixins: [baseIm, socket, wxApi],
  components: {
    VideoCom, //视频组件
    LsCountDownCom, //倒计时组件
    MiddleNavCom, //nav 组件
    LsFooter, //底部组件
    InteractionRightCom, //右边互动区域组件
    //LsInteractionRightCom, //右边互动区域组件
    LiveMsg, //留言组件
    LiveBack, //直播间回看组件
    ShoppingBtn, //一键下单组件
    LiveCurProduct, //直播间图文组件
    LiveInvitationList, //直播间邀请榜组件
    ZxyhLiveInvitationList,//中信银行邀请榜
    LiveLinks, //直播间热门产品组件
    RedPacketCom, //红包组件
    SendGift, //送礼打赏
    GiftTips, //送礼提示
    InvitationCard, //邀请卡组件
    LiveReward, //打赏组件
    LiveSpeaker, //主讲
    ProductExplain,// 商品讲解
  },
  data() {
    return {
      //roomData : this.roomInfo,
      roomId: this.$route.params.roomid, //房间id
      videoCoverBox: true, //视频覆盖层
      //tab信息
      navTabArray: [
        {
          type: 999,
          title: "主讲",
          creator: "",
          content: "",
          invitaCard: 0,
          openMobile: 0
        },
        ...this.roomInfo.tables
      ], //nav 数据this.roomInfo.tables
      isContentCom: null, //留言区域组件
      noNavLength: "", //没有nav配置
      isNoNav: null, //有没有nav
      isRedPacketCom: false, //红包组件显示
      renderCom: 0, //强制刷新红包组件
      redPacketData: {}, //单个红包信息
      redPacketMsgData: {}, //留言里面的单个红包信息
      redListParent: [], //红包历史数据数组
      enterType: "", //红包进入方式
      liveRoomInterval: "", //房间定时器
      //im相关
      un: "",
      nickname: "", // 昵称
      wxpic: "",
      selSess: null,
      selType: webim.SESSION_TYPE.GROUP,
      imMsgItem: {}, //要传到子组件里面的 im消息
      imOfficalMsgItem: {}, //传到子组件 im小助手消息
      imReplyMsgItem: {}, //传到子组件 im小助手回复消息
      isInvitationCard: false,
      fromCom: "hScreenLive",
      roomNum: "", //房间人数
      roomRealNum: " ", //真是人数
      socketLoveMsg:null,//socket 点赞消息
	  socketGiftMsg :null,//socket 送礼消息
      isCkFull: false,
      isMarquee: false, //跑马灯
      marqueeArray: [], //跑马灯数组
      marqueeTipUnArray: [], //进入房间数组
      marqueeTipUnShow: false, // 动画的执行与不执行
      marqueeTipClass: "", //进入房间提示class
      isEnterMessage: false, //进入房间提示开启  true 打开 false 关闭
      computeLeft: "", //计算进入房间提示滚动距离
      isCountDown: false, //倒计时组件
      isPlayBtn: false, //播放按钮显示不显示
      isShoppingBtn: false, //一键下单按钮
      shoppingTitle: "", //一键下单标题
      msg: "baberrage",
      barrageIsShow: "", //弹幕内容
      currentId: 0,
      barrageLoop: false,
      barrageList: [], //弹幕数据
      getPlatform: fun.getPlatform(), //app wx
      isZxyh: false, //中信遮挡
      inputValue: "", //中信遮挡
      liveType: "", //房间状态 roomStatus  0  1  2  对应 1  2  16
      comeTip: "来到直播间", //进入房间提示语
      zxyhSend: "zxyh-send-gray",
      isTips: false, //工商银行非指定客群ID进入提示
      keepAlive: "", //工商银行保活定时器
      isDzhBs: false, //大智慧标识
      shoppingIcon: "", //一键下单图标
      speakerData:[],
      isProductShow:false,// 商品讲解组件默认显示
			productObj:{},//商品讲解对象
    };
  },
  computed: {
    riskTipEd() {
      return this.$store.state.setRiskTip;
    },
    isCom() {
      //提示框
      return this.$store.state.setTip;
    },
    uinfo() {
      return this.$store.state.userInfo;
    },
    wacthIconUn() {
      //优化 监听 icon un
      return this.$store.state.SysOrgInfo.icon;
    },
    showSendMask() {
      //送礼操作面板外层透明蒙版  显示
      return this.$store.state.giftPanel.showSendMask;
    },
    showGiftPanelFlag() {
      //送礼操作面板 显示
      return this.$store.state.giftPanel.showGiftPanelFlag;
    },
    showSendGiftFlag() {
      //送礼提示 显示
      return this.$store.state.showSendGiftFlag;
    },
    giftMessageArray() {
      return this.$store.state.giftMessageQueue;
    },
    isGetNumCfg() {
      if (
        this.isCkFull == false &&
        this.roomRealNum > 0 &&
        this.roomInfo.roomInfo.maxNum != undefined &&
        this.roomInfo.roomInfo.maxNum > 0
      ) {
        this.isCkFull = true;
        if (this.roomRealNum >= this.roomInfo.roomInfo.maxNum) {
          fun.toastMessage("抱歉直播间人数达到上限，请稍后再来", 1666);
          let _this = this;
          setTimeout(() => {
            _this.$router.push(`/${this.$channel}/home`);
          }, 1666);
        }
        return true;
      } else {
        return false;
      }
    }
  },
  watch: {
    inputValue() {
      if (this.inputValue) {
        this.zxyhSend = "zxyh-send ";
      } else {
        this.zxyhSend = "zxyh-send-gray";
      }
    },

    riskTipEd: {
      // 检查是否签约
      immediate: true,
      handler(val, oldVal) {
        if (this.$channel == "zyzq" && !val) {
          fun.getRoomSignUp(this.roomId, 0); //签约类提示
        }
      }
    },
    uinfo(curVal, oldVal) {
      if (curVal.un != undefined && curVal.un.length > 0) {
        this.un = curVal.un;
        this.nickname = curVal.nickname;
        this.wxpic = curVal.wxpic;
        this.getImInit(); //防止vuex  userInfo为空返回比较慢
        this.getCardER(); //防止vuex  userInfo为空返回比较慢
      }
    },
    wacthIconUn(newValue, oldValue) {
      this.wxRegister(this.wxRegCallback);
    },
    isGetNumCfg(v, ov) {}
  },
  created() {
    if (window.terminal.isDzhApp) {
      //大智慧增加roomid 机构
      this.isDzhBs = true;
    }
    if (this.roomInfo.roomInfo.roomStatus == "0") {
      //预告
      this.liveType = "1";
    } else if (this.roomInfo.roomInfo.roomStatus == "1") {
      //直播
      this.liveType = "2";
    } else if (this.roomInfo.roomInfo.roomStatus == "2") {
      //关播
      this.liveType = "16";
    }
    //存直播间url
    let backVideoUrl = window.location.href;
    this.$lockr.set("PlayBackVideoUrl", backVideoUrl);
    fun.dotNum("live_particulars_page"); //打点
    //初始化弹幕
    if (this.roomInfo.roomInfo.bulletScreen == "1") {
      //打开弹幕
      this.barrageIsShow = true;
    } else {
      this.barrageIsShow = false;
    }
    this.setIntervalLiveRoom(); //房间定时器
    this.getShoppingData(); //一键下单
    this.computeLeft = (document.body.clientWidth * 215) / 375;
    if (this.roomInfo.roomInfo.enterMessage) {
      //进入房间提示开启
      this.isEnterMessage = true;
    } else {
      this.isEnterMessage = false;
    }
    if (
      this.$store.state.userInfo.un != undefined &&
      this.$store.state.userInfo.un.length > 0
    ) {
      //im 消息初始化
      this.un = this.$store.state.userInfo.un;
      this.nickname = this.$store.state.userInfo.nickname;
      this.wxpic = this.$store.state.userInfo.wxpic;
      this.getImInit(); //im初始化
      this.getCardER(); //邀请里面二维码
    }
    if (this.roomInfo.roomInfo.roomStatus == 0) {
      //预告
      this.isCountDown = true;
      let { video } = this.roomInfo.roomInfo;
      if (video) {
        //配置视屏
        if (
          video.substr(video.length - 3) == "mp4" ||
          video.substr(video.length - 3) == "MP4"
        ) {
          //视频
          this.$store.dispatch("videoSrc", video);
          this.isPlayBtn = true;
        }
      } else {
        //没有配置视频
        this.isPlayBtn = false;
      }
    } else if (this.roomInfo.roomInfo.roomStatus == 1) {
      //直播
      this.isPlayBtn = true;
      this.getVideoSrc(); //视频流
    }
    if (this.$store.state.SysOrgInfo.icon && this.$store.state.userInfo.un) {
      //机构图片和un
      this.wxRegister(this.wxRegCallback);
    }
    if (this.navTabArray.length) {
      switch (
        this.navTabArray[0].type //有值
      ) {
        case 1: //留言
          this.isContentCom = "LiveMsg";
          break;
        case 2: //直播间回看
          this.isContentCom = "LiveBack";
          break;
        case 3: //图文
          this.isContentCom = "LiveCurProduct";
          break;
        case 4: //邀请卡
          this.isContentCom = this.$channel=='zxyh'? 'ZxyhLiveInvitationList' : 'LiveInvitationList' 
          break;
        case 5: //热门产品
          this.isContentCom = "LiveLinks";
          break;
        case 999: //主讲
          this.isContentCom = "LiveSpeaker";
          break;
        default:
          break;
      }
    }
    if (this.navTabArray.length == "1" || this.navTabArray.length == "0") {
      this.noNavLength = "noNav";
      this.isNoNav = false;
    } else {
      this.isNoNav = true;
    }

    this.getRoomMember(
      this.roomId,
      this.roomInfo.roomInfo.sid,
      this.roomInfo.roomInfo.showStyle,
      num => {
        this.roomNum = num;
        if (this.roomInfo.roomInfo.showStyle == 0) {
          this.roomRealNum = num;
        }
      }
    );
    if (
      this.roomInfo.roomInfo.maxNum &&
      this.roomInfo.roomInfo.maxNum > 0 &&
      this.roomInfo.roomInfo.showStyle != 0
    ) {
      this.getRoomMember(this.roomId, this.roomInfo.roomInfo.sid, 0, num => {
        this.roomRealNum = num;
      });
    }
    // gsyh 银行APP保活处理
    if (this.$channel === "gsyh" && fun.getPlatform() === "app") {
      let params = { url: window.location.href };
      this.keepAlive = setInterval(function() {
        console.log("工商银行APP保活处理", "<==========================");
        if (window.ICBCUtilTools4Partner) {
          console.log(window.ICBCUtilTools4Partner, "ICBCUtilTools4Partner");
          ICBCUtilTools4Partner.callNative("Native", "callSessionKeep", params);
        }
      }, 600000);
    }

    // 工商银行 当非指定客群ID的用户进入直播间时
    if (this.$channel === "gsyh") {
      let roomGroupId =
        this.roomInfo.groupId &&
        this.roomInfo.groupId != null &&
        this.roomInfo.groupId.split("|");
      let userGroupId =
        this.$store.state.userInfo.groupId &&
        this.$store.state.userInfo.groupId != null &&
        this.$store.state.userInfo.groupId.split("|");
      let flag = false;
      if (roomGroupId == null) {
        flag = true;
        return;
      }
      if (userGroupId == null) {
        flag = false;
        this.isTips = true;
        return;
      }
      roomGroupId.forEach(item => {
        userGroupId.forEach(item2 => {
          if (item === item2) {
            flag = true;
          }
        });
      });
      if (!flag) {
        this.isTips = true;
      }
    }
  },
  mounted() {
    let _this = this;
    const { roomInfo } = this.roomInfo;
    if (this.$channel === "gyzq") {
      let anchor = roomInfo.anchor;
      let shareUrl =
        window.location.origin +
        "/#/" +
        _this.$channel +
        "/liveRoom/" +
        _this.$route.params.roomid +
        "?fromUn=" +
        _this.$store.state.userInfo.un;
      //let shareUrl = window.location.origin + '/#/' + _this.$channel + '/liveRoom/' + _this.$route.params.roomid + '?fromUn=' + _this.$store.state.userInfo.un
      let param = {
        right: {
          style: "0",
          showNum: "1",
          items: [
            {
              openSource: "MARKET_DATA_DT",
              functionCode: "FN_EMBED_H5_SHARE",
              openType: "5",
              param: {
                URLString: shareUrl,
                title: roomInfo.shareTitel || "【国元证券】一起来看直播吧！", // 分享标题
                content:
                  roomInfo.shareSubtitle || "精彩直播，尽在国元证券手机直播！", //分享描述
                key: {
                  functionCode: "KDS_WebPageWithHead",
                  loginType: 0,
                  param: { webViewUrl: shareUrl }
                }
              },
              simpleName: "分享",
              imageWhite: "navigationBarShareWhite",
              imageGrey: "navigationBarShareGrey"
            }
          ]
        }
      };
      openService("INFORMATION_HEJ", "5", "FN_EMBED_H5_TOPMENUCONTROL", param);
    }
  },
  destroyed() {
    //组件销毁时候调用
    clearInterval(this.liveRoomInterval); //关闭跑马灯 进入房间提示
    clearInterval(this.keepAlive); //关闭工商银行保活机制
    this.quitBigGroup(this.roomId);
    this.$store.dispatch("getShopBtn", false);
  },
  methods: {
    clickZxyhClose() {
      this.isZxyh = false;
    },
    clickZxyhMsg() {
      // isPl  是否允许评论 0 否 1是     plCk 评论审核 0 先发 1 先审后发
      let tmpMsg = this.inputValue;
      let params = {
        type: "0",
        liveType: this.liveType,
        anchor: this.roomInfo.roomInfo.anchor,
        message: tmpMsg,
        plat: fun.getPlatform(),
        sceneId: this.roomInfo.roomInfo.sid,
        roomId: this.roomInfo.roomInfo.roomId
      };
      if (tmpMsg != "") {
        this.$http.post("/h5live/speakSend", this.$qs.stringify(params)).then(
          res => {
            if (res.data.code == "000000") {
              if (res.data.data == "ck") {
                fun.toastMessage("已提交，等待审核", 1500);
              } else {
              }
            } else if (res.data.code == "100003") {
              fun.toastMessage("您已被禁言", 1500);
            } else if (res.data.code == "100008") {
              fun.toastMessage("发言过于频繁，请稍后再发言！", 1500);
            } else {
              fun.toastMessage(res.data.msg, 1500);
            }
          },
          err => {
            console.log(err);
          }
        );
      }
      this.inputValue = "";
    },
    inputBlur() {
      //中西失去焦点
      setTimeout(() => {
        this.isZxyh = false;
      }, 50);
    },
    getCardER() {
      //邀请里面二维码
      let ERcode;
      if (this.$channel == "zyzq") {
        ERcode = "https://e.eqxiu.com/s/0KbV42Z9?bt=yxy";
      } else {
        ERcode =
          window.location.protocol +
          "//" +
          window.location.host +
          "/#/" +
          this.$channel +
          "/liveRoom/" +
          this.roomId +
          "?fromUn=" +
          this.$store.state.userInfo.un;
      }
      this.$lockr.set("ERcode", ERcode);
    },
    socketCallBack() {
      //分享统计
      let _this = this;
      if (_this.$route.query.fromUn != undefined) {
        setTimeout(() => {
          let params = {
            fromUn: _this.$route.query.fromUn,
            anchor: _this.roomInfo.roomInfo.anchor,
            roomId: _this.roomId
          };
          _this.$http
            .post("/h5live/shareCount", _this.$qs.stringify(params))
            .then(
              res => {
                if (res.data.code == "000000") {
                  console.log("share invite data", res.data.data);
                } else {
                  console.log("server data err");
                }
              },
              err => {
                console.log(err);
              }
            );
        }, 368);
      }
    },
    // socket 获取商品讲解消息
    appendExpGoods(productObj){
      if(JSON.stringify(productObj)!=={}){
        const plat = fun.getPlatform();
        if((plat ==='wx' && productObj.goodsTarget=='1')||(plat ==='app' && productObj.goodsTarget=='0')){
          if(productObj.isDefault=='1'){
            this.isProductShow=true;
            this.productObj=productObj;
          }else{
            this.isProductShow=false;
            this.productObj={};
          }
        }
      }
    },
    hongbaostartruan(data) {
      //im红包消息
      if (this.$store.state.isYk) {
        return;
      }
      this.redPacketData = data;
      this.redPacketMsgData = data;
      if (!this.$store.state.isYk) {
        this.renderCom++;
        this.enterType = "redPopup";
        this.isRedPacketCom = true;
      }
    },
    dianwo() {
      let marqueeTipUnClass = ["欢迎1", "欢迎迎欢迎2"];
      let marqueeTipUn = ["周东丽", "蓝胖子欢迎"];
      let n = Math.floor(Math.random() * marqueeTipUnClass.length + 1) - 1;
      this.marqueeArray.push(marqueeTipUn[n]);
    },
    //弹幕数据
    addToList(msg) {
      let _this = this;
      _this.barrageList.push({
        id: ++_this.currentId,
        msg: msg,
        time: 4,
        barrageStyle: _this.getDanMuClass()
        //type: MESSAGE_TYPE.NORMAL,
      });
    },
    //随机选取弹幕的一个class色值
    getDanMuClass() {
      let arrDanMuClass = ["danmuClassWhite", "danmuClass1", "danmuClass2"];
      let n = Math.floor(Math.random() * arrDanMuClass.length + 1) - 1;
      return arrDanMuClass[n];
    },
    //直播间商品列表和标题 一键下单
    getShoppingData() {
      this.$http
        .get("/h5live/getRoomGoodsAndTitle?mixId=" + this.roomId + "&type=0")
        .then(
          res => {
            //mixId 房间id或回看id   type 0-直播间,1-回看
            var ua = navigator.userAgent.toLowerCase();
            if (res.data.code == "000000") {
              //console.log(res.data.data)
              if (res.data.data.goods.length) {
                this.shoppingIcon = res.data.data.icon; //一键下单图标
                //this.shoppingIcon='https://saaszhhk.yundzh.com/zhonghanghk/20190801/f7707499298740b08f2542ce384b254a.jpg'
                if (/MicroMessenger/i.test(ua)) {
                  //微信
                  let num = 0;
                  for (let i = 0; i < res.data.data.goods.length; i++) {
                    if (res.data.data.goods[i].goodsTarget == "1") {
                      // 0 app  1 微信
                      num++;
                    }
                    if(res.data.data.goods[i].isDefault == "1") {
                      this.appendExpGoods(res.data.data.goods[i])
                    }
                  }
                  if (num) {
                    this.isShoppingBtn = true;
                    this.$store.dispatch("getShopBtn", true);
                    this.shoppingTitle = res.data.data.title;
                  }
                } else {
                  //app
                  let num = 0;
                  for (let i = 0; i < res.data.data.goods.length; i++) {
                    if (res.data.data.goods[i].goodsTarget == "0") {
                      // 0 app  1 微信
                      num++;
                    }
                    if(res.data.data.goods[i].isDefault == "1") {
                      this.appendExpGoods(res.data.data.goods[i])
                    }
                  }
                  if (num) {
                    this.isShoppingBtn = true;
                    this.$store.dispatch("getShopBtn", true);
                    this.shoppingTitle = res.data.data.title;
                    //this.shoppingTitle = null
                  }
                }
              }
            }
          },
          err => {}
        );
    },
    //进入房间方法
    TipUnBeforeEnter(el) {
      //进入之前
      el.style.opacity = 1;
      this.marqueeTipClass = this.getMarqueeTipUnClass();
    },
    TipUnEnter(el, done) {
      //进入
      let _this = this;
      Velocity(
        el,
        {
          translateX: _this.computeLeft
          // this.note1.left
        },
        {
          duration: 1000,
          easing: "ease-in-out",
          complete: done
        }
      );
    },
    TipUnAfterEnter(el, done) {
      //进入之后
      Velocity(
        el,
        {
          opacity: 1
        },
        {
          duration: 1000,
          complete: done
        }
      );
      Velocity(
        el,
        {
          opacity: 0
        },
        {
          duration: 250,
          complete: done
        }
      );
      Velocity(
        el,
        {
          translateX: -200
        },
        {
          duration: 0,
          complete: done
        }
      );
      setTimeout(() => {
        this.marqueeTipUnArray = this.marqueeTipUnArray.slice(1);
        this.marqueeTipUnShow = false;
      }, 1410);
    },
    TipUnBeforeLeave(el, done) {
      //离开之前
      Velocity(
        el,
        {
          translateX: -200
          // this.note1.left
        },
        {
          duration: 1000,
          complete: done
        }
      );
    },
    TipUnLeave(el, done) {
      //离开
    },
    //随机选取弹幕的一个class色值
    getMarqueeTipUnClass() {
      let marqueeTipUnClass = [
        "marquee-tip-blue",
        "marquee-tip-orange",
        "marquee-tip-orange1"
      ];
      let n = Math.floor(Math.random() * marqueeTipUnClass.length + 1) - 1;
      return marqueeTipUnClass[n];
    },
    // 跑马灯 和进入房间提示
    setIntervalLiveRoom() {
      this.liveRoomInterval = setInterval(this.setInterFun, 3000);
    },
    setInterFun: function() {
      if (this.marqueeArray.length > 0) {
        //跑马灯打开
        this.isMarquee = true;
      }
      if (this.marqueeTipUnArray.length > 0) {
        //进入房间提示
        this.marqueeTipUnShow = true;
        if (this.marqueeTipUnArray.length > 50) {
          let randomNum = this.random(3, 10);
          this.comeTip = `等${randomNum}人 来到直播间`;
          this.marqueeTipUnArray = this.marqueeTipUnArray.slice(randomNum);
        }
      }
      if (this.giftMessageArray.length > 0 && !this.showSendGiftFlag) {
        //有送礼提示，且礼物画面不在播放中
        this.$store.dispatch("showSendGiftFlag", true);
      }
    },
    // 随机整数
    random(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    //自定义消息跑马灯
    pmdData(data) {
      let _this = this;
      //data = {"type":"pmd","content":"跑马灯内容","number":"2"}
      for (let i = 0; i < data.number; i++) {
        this.marqueeArray.push(data.content);
      }
    },
    //跑马灯动画
    marqueeBeforeEnter(el, done) {
      Velocity(
        el,
        {
          translateX: document.body.clientWidth
        },
        {
          duration: 10,
          easing: "linear",
          complete: done
        }
      );
    },
    marqueeEnter: function(el, done) {
      Velocity(
        el,
        {
          translateX: -this.$refs.marqueeDom.offsetWidth
        },
        {
          duration:
            (this.$refs.marqueeDom.offsetWidth * 25000) /
            document.body.clientWidth,
          easing: "linear",
          complete: done
        }
      );
    },
    marqueeAfterEnter: function(el) {
      this.isMarquee = false;
    },
    marqueeBeforeLeave: function(el) {
      this.marqueeArray = this.marqueeArray.slice(1);
    },
    marqueeLeave: function(el, done) {},
    marqueeAfterLeave: function(el) {},
    appendGiftMsg(giftObj){// socket  送礼消息
		this.socketGiftMsg = giftObj;
	},
	appendLoveMsg(loveObj){//socket 点赞消息
		this.socketLoveMsg = loveObj;
	},
    updateMember(num) {
      //socket人数
      if (num) {
        if (
          !(
            this.roomInfo.roomInfo.showStyle != 0 &&
            this.roomNum &&
            this.roomNum > num
          )
        ) {
          this.roomNum = num;
        }
      }
    },
    getRoomMember(roomId, sid, showStyle, cb) {
      let _this = this;
      this.$http
        .get(
          "/h5live/getRoomMember?roomId=" +
            roomId +
            "&sid=" +
            sid +
            "&showStyle=" +
            showStyle
        )
        .then(
          res => {
            if (res.data.code == "000000") {
              cb(res.data.data);
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    // 送礼 提示 动画
    TipUnBeforeEnters(el) {
      //进入之前
      el.style.opacity = 1;
    },
    TipUnEnters(el, done) {
      //进入
      let _this = this;
      Velocity(
        el,
        {
          translateX: (document.body.clientWidth * 277.5) / 375
        },
        {
          duration: 0,
          easing: "ease-in-out",
          complete: done
        }
      );
    },
    TipUnAfterEnters(el, done) {
      //进入之后
      Velocity(
        el,
        {
          opacity: 1
        },
        {
          duration: 3000
        }
      );
      setTimeout(() => {
        let giftInfo = this.$store.state.giftMessageQueue.slice(1);
        this.$store.dispatch("giftMessageQueue", giftInfo);
        this.$store.dispatch("showSendGiftFlag", false);
      }, 3000);
    },
    TipUnBeforeLeaves(el, done) {
      //离开之前
      el.style.display = "none"; // 隐藏后再进行移动，否则会出现弹回效果
      Velocity(
        el,
        {
          translateX: (-document.body.clientWidth * 317.5) / 375
        },
        {
          duration: 0,
          complete: done
        }
      );
    },
    TipUnLeaves(el, done) {
      //离开
    },
    hideGiftPanelHandle() {
      // 关闭送礼面板，数量归一
      this.$store.dispatch("showGiftPanelFlag", false);
      this.$store.dispatch("showSendMask", false);
      this.$store.dispatch("giftAmount", 1);
    },
    sheetBeforeEnter(el, done) {
      //底部面板 弹出之前
      Velocity(
        el,
        {
          translateY: "100%"
        },
        {
          duration: 0,
          easing: "ease-out",
          complete: done
        }
      );
    },
    sheetEnter(el, done) {
      //底部面板 弹出时
      Velocity(
        el,
        {
          translateY: "0%"
        },
        {
          duration: 500,
          easing: "ease-out",
          complete: done
        }
      );
    },
    sheetAfterEnter(el, done) {
      //弹出之后
      // Velocity(
      // 	el, {
      // 		translateY: '0%'
      // 	}, {
      // 		duration: 300,
      // 		complete: done
      // 	}
      // )
    },
    sheetBeforeLeave(el, done) {
      //弹入之前
      Velocity(
        el,
        {
          translateY: "100%"
        },
        {
          duration: 800,
          complete: done
        }
      );
    },
    sheetLeave(el, done) {},
    wxRegCallback() {
      //分享
      let _this = this;
      let shareUrl =
        window.location.origin +
        "/#/" +
        _this.$channel +
        "/liveRoom/" +
        _this.$route.params.roomid +
        "?fromUn=" +
        _this.$store.state.userInfo.un;
      let opstion = {
        link: shareUrl,
        title: _this.roomInfo.roomInfo.shareTitel, // 分享标题
        desc: _this.roomInfo.roomInfo.shareSubtitle, //分享描述
        imgUrl:
          _this.roomInfo.roomInfo.shareImgurl ||
          _this.$store.state.SysOrgInfo.icon, //分享的图片 取不到值取机构icon
        success: function() {
          let params = {
            roomId: _this.roomId,
            sceneId: _this.roomInfo.roomInfo.sid,
            anchor: _this.roomInfo.roomInfo.anchor,
            url: window.location.origin + "/#" + _this.$route.path
          };
          _this.$http
            .post("/h5live/shareStatic", _this.$qs.stringify(params))
            .then(
              res => {},
              err => {
                console.log(err);
              }
            );
        },
        error: function(e) {}
      };
      !opstion["title"] &&
        (opstion["title"] =
          "【" + _this.$store.state.SysOrgInfo.name + "】一起来看直播吧！");
      !opstion["desc"] &&
        (opstion["desc"] =
          "精彩直播，尽在" + _this.$store.state.SysOrgInfo.name + "手机直播！");
      _this.ShareTimeline(opstion);
    },
    // 设置留言和点赞里面的时间
    getTime: function() {
      let date = new Date();
      let seperator1 = "-";
      let seperator2 = ":";
      let month = date.getMonth() + 1; // 月份
      let strDate = date.getDate(); // 天
      let strHours = date.getHours(); // 小时
      let strMinutes = date.getMinutes(); // 分钟
      let strSec = date.getSeconds(); //秒
      let year = date.getFullYear(); //年
      // 单数前加 0
      month = /^\d$/.test(month) ? "0" + month : month;
      strDate = /^\d$/.test(strDate) ? "0" + strDate : strDate;
      strHours = /^\d$/.test(strHours) ? "0" + strHours : strHours;
      strMinutes = /^\d$/.test(strMinutes) ? "0" + strMinutes : strMinutes;
      strSec = /^\d$/.test(strSec) ? "0" + strSec : strSec;
      return (
        year +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        strHours +
        seperator2 +
        strMinutes +
        seperator2 +
        strSec
      );
    },
    quitBigGroup(avChatRoomId) {
      let options = {
        GroupId: avChatRoomId //群id
      };
      webim.quitBigGroup(
        options,
        function(resp) {
          webim.logout();
          console.log("退群成功");
        },
        function(err) {
          console.log("退群fail", err.ErrorInfo);
        }
      );
    },
    //进入房间信息提示回调
    enterRoomPersonTip(nick) {
      //参数昵称
      if (this.isEnterMessage) {
        //true 是进入房间开启提示  false是不提示
        if (this.$store.state.userInfo.nickname != nick) {
          //当前账号不是自己 push到数组里面
          this.marqueeTipUnArray.push(nick);
        }
      }
    },
    //小助手发言回复
    replyMessage(data) {
      this.imReplyMsgItem = data;
    },
    // 小助手发言
    heaperMessage(data) {
      this.imOfficalMsgItem = data;
    },

    //IM留言
    getMessage(msg) {
      let subType = msg.getSubType();
      let text = "";
      let HDhtml = "";
      let typeNum = "";
      switch (subType) {
        case webim.GROUP_MSG_SUB_TYPE.COMMON: // 群普通消息
          text = this.convertMsgtoHtml(msg);
          //						if(text===this.$channel+'ANSWER'){//typeNum == 3  答题
          //							typeNum = 3;
          //							HDhtml =' <div class="HDClass1">提交了答题~ <div class="HDimg classDT"></div></div>'
          //						}
          //						if(text===this.$channel+'QUESTION'){//typeNum == 4  问卷
          //							typeNum = 4;
          //							HDhtml =' <div class="HDClass1">提交了问卷~ <div class="HDimg classWJ"></div></div>'
          //						}
          //						if(text===this.$channel+'VOTE'){//typeNum == 5 投票
          //							typeNum = 5;
          //							HDhtml =' <div class="HDClass1">已投票成功~ <div class="HDimg classTP"></div></div>'
          //						}

          //						if(trim(text).length == '11') {
          //							if((/^1[3456789]\d{9}$/.test(trim(text)))) { //是手机号码
          //								text = trim(text).substring(0, 3) + "****" + trim(text).substring(7, 11);
          //							}
          //						}

          if (text === "gift") {
            //typeNum === 6 礼物消息
            typeNum = 6;
          }
          break;
        case webim.GROUP_MSG_SUB_TYPE.REDPACKET: // 群红包消息
          text = "[群红包消息]" + this.convertMsgtoHtml(msg);
          break;
        case webim.GROUP_MSG_SUB_TYPE.LOVEMSG: // 群点赞消息
          // 业务自己可以增加逻辑，比如展示点赞动画效果
          //text = '[群点赞消息]' + this.convertMsgtoHtml(msg)
          // this.isShow();
          // 展示点赞动画
          // showLoveMsgAnimation();
          break;
        case webim.GROUP_MSG_SUB_TYPE.TIP: // 群提示消息
          text = "";
          this.convertMsgtoHtml(msg);
          break;
        default:
          text = msg.tipText;
          break;
      }
      if (text != "") {
        this.imMsgItem = {
          addTime: this.livetime(this.getTime()),
          anchor: this.roomInfo.roomInfo.anchor,
          avator:
            msg.fromAccountHeadurl != undefined
              ? msg.fromAccountHeadurl.replace("http://", "//")
              : imgTx,
          channel: this.roomInfo.roomInfo.channel,
          id: null,
          message: text,
          nickName: msg.getFromAccountNick(),
          roomId: this.roomId,
          sceneId: this.roomInfo.roomInfo.sid,
          type: 0,
          un: msg.fromAccount,
          vType: null
        };
        if (text.length < 30 && !this.videoCoverBox) {
          //限制弹幕字符串 并且背景图片是不显示的
          if (trim(text).length == 11) {
            //手机号中间四位加密
            if (/^1[3456789]\d{9}$/.test(trim(text))) {
              //是手机号码
              text =
                trim(text).substring(0, 3) +
                "****" +
                trim(text).substring(7, 11); //
              this.addToList(text);
            }
          } else {
            this.addToList(text);
          }
        }
      }
    },
    getImInit() {
      let _this = this;
      _this.$http.get("/h5live/getUserSix").then(
        res => {
          if (res.data.code == "000000") {
            _this.iniIm(
              _this.roomInfo.sdkId,
              _this.roomInfo.acType,
              _this.roomId,
              _this.$store.state.userInfo.un,
              _this.$store.state.userInfo.nickname,
              _this.$store.state.userInfo.wxpic,
              res.data.data,
              () => {
                _this.initWebSocket(
                  "/liveSocket/liveRoom?token=" +
                    _this.$token +
                    "&plat=" +
                    fun.getPlatform() +
                    "&roomId=" +
                    _this.roomId +
                    "&channel=" +
                    _this.$channel+'&source='+_this.$source
                );
              }
            );
          }
        },
        err => {}
      );
    },
    playBtn() {
      //播放按钮
      this.$refs.videoCom.playStart();
      this.videoCoverBox = false;
      this.videoPlayFlag = true;
      if (this.$store.state.dmShow == "1") {
        this.barrageIsShow = true; //打开弹幕
      }
    },
    getVideoSrc() {
      //视频流
      this.$http.get("/h5live/v1/play-stream-url?roomId=" + this.roomId).then(
        res => {
          if ((res.data.code = "000000")) {
            let videoSrc = res.data.data;
            this.$store.dispatch("videoSrc", videoSrc);
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    formChildData(data) {
      //子组件传过来的数据
      //console.log(data)
      switch (data.type) {
        case "navType": //nav tab
          switch (
            data.data //有值
          ) {
            case 1: //留言
              this.isContentCom = "LiveMsg";
              break;
            case 2: //直播间回看
              this.isContentCom = "LiveBack";
              break;
            case 3: //图文
              this.isContentCom = "LiveCurProduct";
              break;
            case 4: //邀请卡
              this.isContentCom = this.$channel=='zxyh'? 'ZxyhLiveInvitationList' : 'LiveInvitationList' 
              break;
            case 5: //热门产品
              this.isContentCom = "LiveLinks";
              break;
            case 999: //主讲
              this.isContentCom = "LiveSpeaker";
              break;
            default:
              break;
          }
          break;
        case "barrageOpen": //弹幕开关
          if (data.data == "0") {
            //关闭弹幕
            this.barrageIsShow = false;
          } else if (data.data == "1") {
            //打开弹幕
            this.barrageIsShow = true;
          }
          break;
        case "historyRedPcaketListArray": //历史红包数组
          this.enterType = "redBtn";
          this.redListParent = data.data;
          this.isRedPacketCom = true;
          break;
        case "closeRedPacketCom": //关闭红包组件
          this.isRedPacketCom = false;
          break;
        case "sendImNotice": //要发送的im消息
          this.SendImMsg(data.data.tmpMsg);
          break;
        case "startToLive": //开始直播
          this.videoCoverBox = true; //显示背景图片
          this.isPlayBtn = true; //显示播放按钮
          this.isCountDown = false; //隐藏倒计时组件
          this.getVideoSrc(); //视频流
          break;
        case "sendImGiftMsg": //送礼物im
          break;
        case "inputFocus": //中信遮挡问题处理
          this.isZxyh = true;
          let inputDom = document.querySelector(".inner-input");
          this.$nextTick(() => {});
          setTimeout(() => {
            inputDom.focus();
          }, 100);
          break;
        case "clickMessageLiHbData": //点击列表里面的红包
          this.enterType = "messageRedPacket";
          this.redPacketData = data.data.hbData;
          this.renderCom++;
          this.isRedPacketCom = true;
          break;
        case "interactionList": //邀请卡组件
          switch (data.data.type) {
            case "2":
              if (this.$store.state.isYk) {
                //游客
                  fun.ykDisposeFun();
                  return;
              } else {
                if (
                  this.$channel === "zxxykzx" &&
                  fun.getPlatform() === "app"
                ) {
                  fun.shareOut(
                    this.roomInfo.roomInfo,
                    "liveRoom",
                    this.roomId,
                    this.$store.state.userInfo.un
                  );
                  return;
                }

                this.isInvitationCard = true;
              }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
    // 关闭当前页面
    msgParent(data) {
      if (data.type == "closeInvitation") {
        this.isInvitationCard = false;
      }
    },
    //im推送了答题等
    pushVote(obj) {
      //触发子组件的消息推送
      this.$refs.childRightWrap.pushVote(obj);
      //this.$parent.getRoomInfo();
    },
    socketZGMS(data){
		this.speakerData = []
		let msg  = JSON.parse(data.body)
		this.speakerData.unshift(msg)
		//console.log(this.speakerData)
	},
  }
};
</script>

<style scoped="scoped">
.black-zxyh {
  width: 100vw;
  height: 500px;
  background: rgba(0, 0, 0, 0.4);
}
.zxyh-bg {
  width: 100vw;
  height: 265px;
  background: white;
  display: flex;
}
.zxyh-zd-box {
  width: 100vw;
  height: 600px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: fixed;
  left: 0;
  bottom: 380px;
  z-index: 1111;
  display: flex;
  padding-bottom: 50px;
}
.zxyh-close {
  float: right;
  font-size: 24px;
  font-weight: 500;
  color: #999999;
  padding: 5px 10px;
  margin: 25px 37px 0 0;
}
.zxyh-close img {
  width: 28px;
}
.zxyh-send {
  float: right;
  font-size: 28px;
  font-weight: 500;
  width: 113px;
  height: 52px;
  background: #e75e61;
  color: white;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 83px 27px 0 0;
}
.zxyh-send-gray {
  float: right;
  font-size: 28px;
  font-weight: 500;
  /*padding: 5px 10px;*/
  width: 113px;
  height: 52px;
  background: #f3afaf;
  color: white;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 83px 27px 0 0;
}
.zxyh-header {
  /*background: salmon;*/
  flex: 1;
  /*display: flex;
	    justify-content: center;
	    align-items: flex-end;
	    flex-direction: column;*/
}
.zxyh-textarea {
  width: 556px;
  height: 179px;
  background: #f4f4f4;
  border-radius: 21px;
  margin-top: 21px;
  margin-left: 30px;
}
.inner-input {
  width: 556px;
  height: 179px;
  background: #f4f4f4;
  border-radius: 21px;
  padding: 20px;
  font-size: 28px;
  /*font-weight: 500;*/
  color: #949494;
}
.landscape-live-box {
  width: 100vw;
  height: 100vh;
  background: white;
  overflow: hidden;
}

.video-cover-box {
  width: 100vw;
  height: 424px;
  /*		background: pink;*/
  position: absolute;
  top: 0;
  left: 0;
}
.list-header-zyzq ~ .video-cover-box {
  top: 88px;
}
.list-header-zyzq ~ .land-live-msg >>> .comment-box {
  height: 88px;
}

.list-header-zyzq ~ .count-down-box {
  top: 426px;
}
.list-header-zyzq ~ .shopping-box >>> .shopping-list-ul {
  padding-bottom: 20px;
  max-height: 556px;
}

.list-header-zyzq ~ .live-reward-box >>> .reward-box {
  top: 113px;
}
.list-header-zyzq ~ .live-reward-box >>> .reward-btn {
  top: 300px;
}
.cover-video-img {
  height: 424px;
  width: 100vw;
  display: block;
  object-fit: cover;
}

.play-btn {
  width: 115px;
  height: 115px;
  background: url(../../../assets/images/play.png) no-repeat;
  background-size: 115px 115px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -57.5px;
  margin-left: -57.5px;
  z-index: 1000;
}

.gift-bg-mask {
  width: 100vw;
  height: 100vh;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
}

.dianwo {
  display: inline-block;
  width: 180px;
  height: 40px;
  position: absolute;
  top: 100px;
  left: 30px;
  z-index: 10000;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  outline: none;
  border: none;
  background: black;
}

.person-list {
  position: absolute;
  top: 140px;
  left: 30px;
  z-index: 10;
  color: red;
}

.marquee-box {
  height: 70px;
  position: fixed;
  top: 520px;
  /*right: 0;*/
  z-index: 1100;
  display: flex;
  /*background: rgba(255,253,238,0.9);*/
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  padding: 0 30px;
}

.marquee-left {
  width: 47px;
  height: 70px;
  background: url(../../../assets/images/marquee-left.svg) no-repeat;
}

.marquee-content {
  background: #ffb12a;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.marquee-text-box {
  background: rgba(204, 53, 56, 0.6);
  height: 60px;
  color: white;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 17px;
  font-size: 28px;
  white-space: nowrap !important;
}
.marquee-tip {
  position: fixed;
  left: -400px;
  bottom: 175px;
  z-index: 10;
  opacity: 0.85;
  border-radius: 8px;
  color: white;
  font-size: 24px;
  padding: 10px 16px;
  text-align: center;
  font-weight: 500;
}

.marquee-tip-blue {
  background: rgba(54, 209, 255, 1);
}

.marquee-tip-orange {
  background: #ff9e63;
}

.marquee-tip-orange1 {
  background: #ff7162;
}

.marquee-tip span {
  margin-right: 10px;
}

.baberrage-item {
  padding: 0px 0px 0px 140px !important;
}

.baberrage-stage >>> .danmuClassWhite {
  color: white !important;
}

.baberrage-stage >>> .danmuClass1 {
  color: #f02e2e !important;
}

.baberrage-stage >>> .danmuClass2 {
  color: #f2b954 !important;
}

.baberrage-msg {
  text-shadow: 2px 2px 2px #272727;
  font-size: 30px;
  line-height: 26px !important;
  padding: 10px 0 4px 0 !important;
}

.baberrage-avatar {
  display: none !important;
}

.baberrage-stage {
  width: 750px !important;
  height: 0px !important;
  /*border: 3px  saddlebrown solid;*/
  /*background: pink;*/
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 505 !important;
  margin-top: 66px;
  overflow: visible;
}
.dzh-bs {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 27px;
  right: 20px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
}
.dzh-bs p {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.6;
  margin-right: 7px;
}
.dzh-jg-box {
  width: 56px;
  height: 26px;
  border: 1px solid #999999;
  opacity: 0.7;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 300;
  color: #ffffff;
  opacity: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
